<template>
    <div>
        <div class="formbox">
            <div class="top">
                <div class="toptext">筛选</div>
                <div class="clear" @click="clearform">
                    <img src="../../assets/image/容器.png" alt="" />
                    <span>清除</span>
                </div>
            </div>
            <div class="formcontent">
                <div class="formitem">
                    <div class="lable">客户名称：</div>
                    <el-select
                        clearable
                        style="margin-right: 52px; width: 265px"
                        v-model="companyid"
                        filterable
                        remote
                        reserve-keyword
                        @change="getdayinsurecompanylist"
                        placeholder="请输入公司名称"
                        :remote-method="remoteMethod"
                        :loading="loading"
                    >
                        <el-option
                            v-for="item in companylist"
                            :key="item.id"
                            :label="item.companyName"
                            :value="item.id"
                        />
                    </el-select>
                    <div class="lable">派遣单位：</div>
                    <el-input
                        clearable
                        @input="changedispatchingagency"
                        v-model="dispatchingagency"
                        style="width: 265px"
                        placeholder="请输入派遣单位"
                        :prefix-icon="Search"
                    />
                </div>
                <div class="formitem">
                    <div class="lable">审核状态：</div>
                    <el-radio-group
                        v-model="checkstatus"
                        @change="getdayinsurecompanylist"
                    >
                        <el-radio label="" size="large">全部</el-radio>
                        <el-radio label="0" size="large">待审核</el-radio>
                        <el-radio label="1" size="large">已通过</el-radio>
                        <el-radio label="2" size="large">已驳回</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <div class="accounttable">
            <div class="tableborder">
                <el-table
                    :data="tableData"
                    style="width: 100%; margin-top: 16px"
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column prop="companyName" label="客户名" />
                    <el-table-column prop="serveCompanyName" label="派遣单位" />
                    <el-table-column prop="auditStatus" label="审批状态">
                        <template #default="scope">
                            <span
                                v-show="scope.row.auditStatus === 3"
                                class="gray"
                                >待审批</span
                            >
                            <span
                                v-show="scope.row.auditStatus === 1"
                                class="blue"
                                >已通过</span
                            >
                            <span
                                v-show="scope.row.auditStatus === 2"
                                class="red"
                                >已驳回</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="contacts" label="负责人" />
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column label="图片视频">
                        <template #default="scope">
                            <span
                                v-show="scope.row.params?.file"
                                @click="lookdayvidio(scope.row.params?.file)"
                                class="blue pointer"
                                >点击查看</span
                            >
                            <span v-show="!scope.row.params?.file">--</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="申请理由">
                        <template #default="scope">
                            <span>{{ scope.row.remark || '--' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="驳回理由">
                        <template #default="scope">
                            <span>{{ scope.row.rejectRemark || '--' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="wesureInfo.industryName"
                        label="行业名称"
                    />
                    <!-- <el-table-column prop="area" label="地区" /> -->
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div class="flexvetweenbox">
                                <div
                                    class="blue pointer"
                                    v-show="
                                        scope.row.auditStatus === 3 ||
                                        scope.row.auditStatus === 1
                                    "
                                    style="
                                        border-right: 1px solid #f4f4f7;
                                        padding-right: 10px;
                                        box-sizing: border-box;
                                    "
                                    @click="changedayhy(scope.row)"
                                >
                                    修改行业
                                </div>
                                <div
                                    v-show="scope.row.auditStatus === 3"
                                    class="green pointer"
                                    @click="daycheckok(scope.row)"
                                >
                                    通过
                                </div>
                                <div
                                    v-show="scope.row.auditStatus === 3"
                                    class="oriange pointer"
                                    @click="daycheckno(scope.row)"
                                >
                                    驳回
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="paginationborder">
                <pagination
                    :total="total"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    @SizeChange="handleSizeChange"
                    @CurrentChange="handleCurrentChange"
                ></pagination>
            </div>
        </div>
        <!-- 日日保派遣单位审批修改行业弹窗 -->
        <el-dialog
            v-model="dialogdaychangehyVisible"
            title="修改行业"
            width="515"
        >
            <span style="margin-right: 10px; font-weight: 700">行业</span>
            <el-select
                style="width: 400px"
                v-model="dayhy"
                multiple
                filterable
                allow-create
                default-first-option
                :reserve-keyword="false"
                placeholder="请选择行业"
            >
                <el-option
                    v-for="item in dayhylist"
                    :key="item.id"
                    :label="item.industryName"
                    :value="item.id"
                />
            </el-select>
            <div class="flexcenterbox" style="margin-top: 20px">
                <el-button class="my_cancelbtn" @click="changedayhycancel"
                    >取消</el-button
                >
                <el-button class="my_btn" @click="changedayhyok"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 查看视频弹窗 -->
        <el-dialog
            v-model="diavideoVisible"
            title=""
            top="10vh"
            :width="isMobile ? '960' : '50%'"
            @close="handleVideoClose"
        >
            <h3 class="flexcenterbox">
                {{ atpresent + 1 }}/{{ videolist.length }}
            </h3>
            <div class="videobox">
                <div class="lbtn">
                    <img
                        @click="prev"
                        src="../../assets/image/lbtn.png"
                        alt=""
                    />
                </div>
                <div
                    v-show="atpresent === index"
                    class="video"
                    style="height: 600px"
                    v-for="(ele, index) in videolist"
                    :key="index"
                >
                    <video
                        crossorigin="anonymous"
                        :ref="(el: refItem) => setRefMap(el, `video${index}`)"
                        style="height: 600px; width: 100%"
                        :src="ele"
                        loop
                        controls
                    ></video>
                </div>
                <div class="rbtn">
                    <img
                        @click="next"
                        src="../../assets/image/rbtn.png"
                        alt=""
                    />
                </div>
            </div>
        </el-dialog>
        <el-dialog
            v-model="dialogbhVisibledayinsure"
            title="驳回理由"
            width="515"
        >
            <el-input
                v-model="dayinsurebhtextarea"
                maxlength="100"
                placeholder="请输入驳回理由"
                show-word-limit
                type="textarea"
            />
            <div class="flexcenterbox" style="margin-top: 28px">
                <el-button class="my_cancelbtn" @click="daybhcancel"
                    >取消</el-button
                >
                <el-button class="my_btn" @click="daybhsure">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {
    ElMessage,
    ElMessageBox,
    ElTable,
    UploadFile,
    UploadFiles,
    UploadRawFile
} from 'element-plus'
import {
    ref,
    reactive,
    computed,
    watch,
    onMounted,
    ComponentPublicInstance
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    getcompanyapi,
    getdayinsurecompanylistapi,
    getdayinsurejoblistapi,
    dayinsurecheckdispatchingAgencyapi,
    changedayandteamhyapi
} from '../../api/api'
import { shake } from '../../utils/utils'
const isMobile = ref((window as any).isMobile)

const router = useRouter()
const route = useRoute()
import { Search } from '@element-plus/icons-vue'
onMounted(() => {
    getdayinsurecompanylist()
})

const daycheckno = (val: any) => {
    dialogbhVisibledayinsure.value = true
    cval.value = JSON.parse(JSON.stringify(val))
}
const cval = ref<any>()
const daybhsure = () => {
    if (dayinsurebhtextarea.value === '') {
        ElMessage.error('请输入驳回理由.')
        return
    }
    cval.value.remark = dayinsurebhtextarea.value
    cval.value.auditStatus = 2
    cval.value.insureCompanyType = 'insure002_gsc'
    dayinsurecheckdispatchingAgencyapi(cval.value).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            getdayinsurecompanylist()
            daybhcancel()
        }
    })
}
const dayinsurebhtextarea = ref('')
const daybhcancel = () => {
    dialogbhVisibledayinsure.value = false
    dayinsurebhtextarea.value = ''
}
const dialogbhVisibledayinsure = ref(false)
const daycheckok = (val: any) => {
    ElMessageBox.confirm('确定通过该条审核么？', '提示', {
        type: 'warning'
    }).then(() => {
        console.log(val)
        const cval = val
        cval.insureCompanyType = 'insure002_gsc'
        cval.auditStatus = 1
        dayinsurecheckdispatchingAgencyapi(val).then((res: any) => {
            if (res.code === 200) {
                ElMessage({
                    message: '操作成功',
                    type: 'success'
                })
                getdayinsurecompanylist()
            }
        })
    })
}
const changedayhyok = () => {
    console.log(dayhy.value)
    console.log(dayhylist.value)
    const jobname: any = []
    dayhylist.value.forEach((ele: any, i: number) => {
        dayhy.value.forEach((item: any, i: number) => {
            if (item === ele.id) {
                jobname.push(ele.industryName)
            }
        })
    })
    changedayandteamhy(2, dayservicecompanyid.value, jobname, dayhy.value)
}

const changedayandteamhy = async (
    productType: any,
    hyserveCompanyId: any,
    industryIdList: any,
    arrids: any
) => {
    const res: any = await changedayandteamhyapi({
        productType: productType,
        serveCompanyId: hyserveCompanyId,
        industryIds: JSON.stringify([
            ...new Set([...arrids, ...new Set(zcids.value)])
        ]),
        industryName: industryIdList.join(',')
    })
    console.log(res, '修改团意保日日保行业')
    if (res.code === 200) {
        ElMessage({
            message: res.msg,
            type: 'success'
        })
        if (productType === 2) {
            getdayinsurecompanylist()
            changedayhycancel()
        }
    }
}
const changedayhycancel = () => {
    dayhy.value = []
    dialogdaychangehyVisible.value = false
}
const dialogdaychangehyVisible = ref(false)
const changedayhy = async (ele: any) => {
    zcids.value = []
    console.log(ele, 'ele')
    await getdayinsurejoblist(2)
    if (!ele.wesureInfo.industryIds) {
        dayhy.value = []
    } else {
        console.log(JSON.parse(ele.wesureInfo.industryIds))
        const infoarr = JSON.parse(ele.wesureInfo.industryIds)
        let arr: any = []
        const hylistids:any = []
        dayhylist.value.forEach((j: any, k: any) => {
            hylistids.push(j.id)
        })
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否在 hylistids 中  
        arr = infoarr.filter((item:any) => hylistids.includes(item))  
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否不在 hylistids 中  
        zcids.value = infoarr.filter((item:any) => !hylistids.includes(item))
/*         infoarr.forEach((ele: any, i: any) => {
            dayhylist.value.forEach((j: any, k: any) => {
                if (ele === j.id) {
                    arr.push(ele);
                } else {
                    zcids.value.push(ele);
                }
            });
        }); */
        dayhy.value = arr
    }
    dayservicecompanyid.value = ele.id
    dialogdaychangehyVisible.value = true
}
const dayservicecompanyid = ref(0)
const dayhy = ref([])
const zcids = ref<any>([])
const getdayinsurejoblist = async (productType: any) => {
    const res: any = await getdayinsurejoblistapi({
        isDelete: 0,
        productType: productType
    })
    console.log(res, '获取日日保团意保行业数据')
    dayhylist.value = res.rows
}
const dayhylist = ref<any>([])
type refItem = Element | ComponentPublicInstance | null;
const next = () => {
    console.log(2)
    if (atpresent.value >= videolist.value.length - 1) {
        return
    } else {
        atpresent.value = atpresent.value + 1
    }
}
const prev = () => {
    console.log(1)
    if (atpresent.value <= 0) {
        return
    } else {
        atpresent.value = atpresent.value - 1
    }
}
const refMap = {} as any
const setRefMap = (el: refItem, name: string) => {
    if (el) {
        refMap[`${name}`] = el
    }
}
const handleVideoClose = () => {
    for (const key in refMap) {
        refMap[key].pause()
    }
}
const lookdayvidio = (url: any) => {
    console.log(url)
    atpresent.value = 0
    diavideoVisible.value = true
    videolist.value = url
}
const videolist = ref([])
const atpresent = ref(0)
const diavideoVisible = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val: any) => {
    console.log(val)
}
const handleCurrentChange = (val: any) => {
    console.log(val)
}
const remoteMethod = (query: string) => {
    console.log(query)
    if (query) {
        loading.value = true
        getcompany(query)
    } else {
        companylist.value = []
    }
}
const getdayinsurecompanylist = async () => {
    const res: any = await getdayinsurecompanylistapi({
        insureCompanyType: 'insure002_gsc',
        auditStatus: checkstatus.value,
        serveCompanyName: dispatchingagency.value,
        companyId: companyid.value,
        pageSize: pageSize.value,
        pageNumber: currentPage.value,
        productType: 2
    })
    console.log(res, '获取蚂蚁保企业列表')
    total.value = res.total
    tableData.value = res.rows
}
const changedispatchingagency = () => {
    shake(getdayinsurecompanylist, 300)
}
const checkstatus = ref('')
const dispatchingagency = ref('')
// 获取公司列表
const getcompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '获取公司列表')
    companylist.value = res
    loading.value = false
}
const getinsurecompanylist = () => {}
const loading = ref(false)
const clearform = () => {}
const tableData = ref<any>([1, 2, 3])
const companylist = ref<any>([])
const companyid = ref('')
</script>

<style scoped lang="scss">
.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            margin-right: 50px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #f4f4f7;

        .toptext {
            color: #3d3d3d;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497b1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}
.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}
.tableborder {
    border: 1px solid #eaeaef;
    border-bottom: none !important;
}

.pointer {
    cursor: pointer;
}

.blue {
    color: #3e5ff5;
}

.gray {
    color: #9497b1;
}

.red {
    color: #ea0000;
}

.green {
    color: #00d679;
}

.yellow {
    color: #ffa814;
}

.oriange {
    color: #ff7642;
}

.videobox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

    .lbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        left: 0;
    }

    .rbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        right: 0;
    }

    .video {
        flex: 1;
        width: 100%;
    }
}
</style>
